<!DOCTYPE HTML>
<html>
<head>
    <title>东方·星言</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale: 1, user-scalable=no" />
    <link rel="stylesheet" href="./css/userpage.css" />
    <link rel="stylesheet" href="./css/styles.css" />
</head>
<body class="is-preload">
    <!-- Header -->
    <header id="header" style="display: flex; justify-content: center; align-items: center;">
        <div class="inner" style="display: flex; flex-direction: column; align-items: center; text-align: center;">
            <a href="#" class="image avatar">
                <img id="avatarImg" src="./Images/user.jpg" alt="avatar" />
            </a>
            <h1 style="font-size: 1.5rem;">
                <strong id="username">username</strong>
            </h1>
            <h1 style="font-size: 1.5rem;">
                <span id="createdText" style="font-size: 1.5rem;">createdTime</span><span id="Text">加入我们</span><br/>
                <button id="uploadAvatarBtn" class="button small">上传专属头像</button>
            </h1>
        </div>
    </header>

    <!-- Main -->
    <div id="main" style="font-size: 1.5rem">
        <!-- One -->
        <section id="one">
            <header class="major">
                <h2 style="font-size: 2rem">基本信息</h2><br/>
            </header>
            <p>上次投票：<span id="lastVote"></span></p>
            <p>今天剩余票数：<span id="remainingVotes"></span></p>
            <p>游戏天数：<span id="gameDays"></span></p>
            <ul class="actions">
                <li><a href="statistics.html" class="button">返回首页</a></li>
            </ul>
        </section>

        <!-- Two -->
        <section id="two" style="font-size: 1.5rem">
            <h2 style="font-size: 2rem">自创角色形象</h2><br/>
            <p>以下是您上传的角色形象：</p><br/>
            <div class="row" id="characterNum" style="font-size: 1.5rem;">
                <!-- JS will populate character items here -->
            </div>
            <ul class="actions">
                <li><button id="uploadCharacterBtn" class="button">上传形象</button></li>
            </ul>
            <div id="uploadMsg"></div>
        </section>
    </div>

    <!-- Scripts -->
    <script defer src="./js/user.js"></script>
</body>
</html>
